<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 获取元素

        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');//关闭
        var title = document.querySelector('#title');
        let box = document.querySelector('#login')
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function () {
            login.style.display = 'block'
            mask.style.display = 'block'
        })
        closeBtn.addEventListener('click', function () {
            login.style.display = 'none'
            mask.style.display = 'none'
        })
        title.addEventListener('mousedown', function (e) {

            let x = e.pageX - box.offsetLeft////    鼠标距离页面位置 - 盒子距离左边的位置 =   鼠标点击位置到盒子边缘的距离
            let y = e.pageY - box.offsetTop
            document.addEventListener('mousemove', moveS)
            function moveS(e) {
                box.style.left = e.pageX - x + 'px'   //鼠标所在位置  -   鼠标到盒子边缘的距离 =  盒子距离左边的距离
                box.style.top = e.pageY - y + 'px'
            }
            document.addEventListener('mouseup', function (e) {
                document.removeEventListener('mousemove', moveS)
            })
        })
  
    </script>
</body>

</html>